<template>
  <div>
    <div class="row-item row-main padding-16">
      <h1 class="demo text-center">Welcome Tea</h1>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <transition name="van-fade">
        <van-field
          v-if="!isLogin"
          v-model="password"
          type="password"
          name="密码"
          label="确认密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </transition>
      <div class="regiter-tips" @click="toggleType">
        {{ !isLogin ? "已有账号-点击立马登录" : "还没有账号?点击立马注册" }}
      </div>
      <div style="margin: 0.5rem">
        <van-button
          round
          block
          color="#dce775"
          type="info"
          native-type="submit"
          >{{ isLogin ? "立马登录" : "立马注册" }}</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
      isLogin: true,
    };
  },
  methods: {
    ...mapMutations("Tabar", ["CHANGE_TABAR"]),
    onSubmit(values) {
      this.$toast({
        message: "很高兴见到你，快来邀约小伙伴来一杯吧~",
      });
      this.$router.push("/");
    },
    toggleType() {
      this.isLogin = !this.isLogin;
    },
  },
  beforeRouteLeave(to, from, next) {
    this.CHANGE_TABAR(true);
    next();
  },
};
</script>

<style scoped>
.text-center {
  text-align: center;
  margin: 1.875rem auto;
}
.regiter-tips {
  width: 100%;
  margin-top: 0.5rem;
  text-align: center;
  color: #424242;
  /* line-height: 1.875rem; */
}
</style>